<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-city" @click="addr()">
          <span>大连市</span>
          <img src="../assets/xjt3.png" alt="" class="head-btm" />
        </div>
        <div class="head-title">
          <img src="../assets/sousuo.png" alt="" />
          <input type="text" placeholder="请输入职位名称" v-model="titles" />
        </div>
        <div class="head-search" @click="getFaxianData">搜索</div>
      </div>
      <div class="con-top">
        <div @click="prop(0)">{{ areaValue }}</div>
        <div @click="prop(1)">{{ tradeValue }}</div>
        <div @click="prop(2)">{{ scaleValue }}</div>
        <div @click="prop(3)">{{ ageValue }}</div>
      </div>
    </div>
    <div class="content">
      <!-- 当前用户为求职者时 -->
      <div class="block" v-for="item in faxianListData.list" @click="goDtl(item.id)" v-show="status==0">
        <!-- 直招外派img -->
		<img
          src="../assets/zz.jpg"
          alt=""
          class="imgBlock"
          v-show="item.recruitType == 1"
        />
        <img
          src="../assets/wp.jpg"
          alt=""
          class="imgBlock"
          v-show="item.recruitType == 2"
        />
        <div class="block-top">
          <span>{{ item.title }}</span>
          <span style="position: relative; z-index: 50">{{ item.salaryRange }}</span>
        </div>
        <div class="block-class">
          <span>{{ item.positionType }}</span>
		  <span>{{ item.regionName }}</span>
		  <span>{{ item.workYearRange }}</span>
        </div>
        <div class="block-btn">
			<span>{{item.companyName}}</span>
          <!-- <span v-for="items in item.city">
            <img src="../assets/fl.png" alt="" />
            {{ items.name }}
          </span> -->
        </div>
      </div>
      <!-- 当前用户为招聘者时 -->
      <div
        class="blocks"
        v-for="item in lists"
        @click="goDtl(item.userId)"
        v-show="status == 1"
      >
        <img
          src="../assets/zz.jpg"
          alt=""
          class="imgBlock"
          v-show="item.type == 1"
        />
        <img
          src="../assets/wp.jpg"
          alt=""
          class="imgBlock"
          v-show="item.type == 2"
        />
        <div class="blocks-top">
          <div class="blocks-div">
            <span class="block-name">{{ item.name }}</span>
            <img src="../assets/yanzheng.png" alt="" class="block-img" />
          </div>
          <span class="block-pay">{{ item.pay }}</span>
        </div>
        <div class="blocks-class">
          <!-- <span v-for="items in item.rqstd">{{ items.name }}</span> -->
           <span>{{item.region}}</span>
          <span>{{item.position_title}}</span>
          <span>{{item.work_year}}</span>
        </div>
        <div class="blocks-btm">
          <div>{{ item.time }}</div>
          <div>
            <span>爽约率：{{ item.fakeRate }}</span>
          </div>
        </div>
      </div>
    </div>
    <mt-popup v-model="areaIf" position="bottom">
      <p class="mt-p">
        <span @click="off(0)">取消</span>
        <span v-show="status == 0">请选择区域</span
        ><span v-show="status == 1">请选择方式</span>
        <span @click="on(0)">确定</span>
      </p>
      <mt-picker
        :slots="area"
        @change="areaChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>

    <mt-popup v-model="tradeIf" position="bottom">
      <p class="mt-p">
        <span @click="off(1)">取消</span>
        请选择学历
        <span @click="on(1)">确定</span>
      </p>
      <mt-picker
        :slots="trade"
        @change="tradeChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="scaleIf" position="bottom">
      <p class="mt-p">
        <span @click="off(2)">取消</span>
        请选择薪资
        <span @click="on(2)">确定</span>
      </p>
      <mt-picker
        :slots="scale"
        @change="scaleChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="ageIf" position="bottom">
      <p class="mt-p">
        <span @click="off(3)">取消</span> 请选择年限
        <span @click="on(3)">确定</span>
      </p>
      <mt-picker
        :slots="ageLimit"
        @change="ageChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <div class="footer">
      <div @click="go('/')">
        <img src="../assets/shouye.png" alt="" />
        首页
      </div>

      <div @click="go('/faxian')" class="footer-color">
        <img src="../assets/faxian1.png" alt="" />
        发现
      </div>
      <div @click="go('/tuijian')">
        <img src="../assets/tuijian.png" alt="" />
        推荐
      </div>
      <div @click="go('/my')">
        <img src="../assets/wode.png" alt="" />
        我的
      </div>
    </div>
  </div>
</template>

<script>
import { Popup, Picker } from "mint-ui";
import Vue from "vue";
var areaValue = "";
var tradeValue = "";
var scaleValue = "";
var ageValue = "";
export default {
  inject: ["reload"],
  name: "faxian",
  components: { Popup, Picker },
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    if(this.status == 0){
      this.getFaxianData();
    } else if (this.status == 1){
      this.getData(); 
    }
		
  },
  mounted() {
    if (this.status == 0) {
      this.areaValue = "方式";
      this.tradeValue = "规模";
      this.scaleValue = "薪资";
      this.ageValue = "年限";
      this.trade = this.scaleList;
    } else if (this.status == 1) {
      this.areaValue = "方式";
      this.tradeValue = "学历";
      this.scaleValue = "薪资";
      this.ageValue = "年限";
    }
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // 当前用户为求职者时
	  faxianListData: {
		  totalCount: '',
		  pageSize: '',
		  totalPage: '',
		  currPage: '',		
		  list: [
        {
          recruitType: 2,
          title: '1111',
          salaryRange: '4-6K',
          positionType: '前端开发',
          workYearRange: '1-3年',
          regionName: '中山区',
          companyName: 'Aaaa'
        },
        {
          recruitType: 1,
          title:'2222',
          salaryRange: '4-6K',
          positionType: '前端开发',
          workYearRange: '1-3年',
          regionName: '中山区',
          companyName: 'Aaaa'
        },
        {
          recruitType: 1,
          title: '3333',
          salaryRange: '8-10K',
          positionType: '前端开发',
		      regionName: '中山区',
		      workYearRange: '1-3年',
          companyName: 'Aaaa'
        }

      ],
	  },
	  titles: '',
      coId:  localStorage.getItem("userId"),
      cityId: localStorage.getItem("cityId"),
      list: [
        {
          job: "web前端开发",
          company: "大连华企智源有限公司",
          pay: "3-5K",
          city: [{ name: "完工结算" }, { name: "下午茶" }],
          rqstd: [{ name: "高新区" }, { name: "web前端" }, { name: "1-3年" }],
          type: 0,
        },
        {
          job: "web前端开发",
          company: "大连华企智源有限公司",
          pay: "6-8K",
          city: [{ name: "完工结算" }, { name: "下午茶" }],
          rqstd: [{ name: "高新区" }, { name: "web前端" }, { name: "4-5年" }],
          type: 1,
        },
      ],
      // 当前用户为招聘者时
      lists: [
        {
          name: "张三",
          time: "2021-03-02",
          pay: "3-5K",
          fail: "从未爽约",
          prov: 0,
          rqstd: [
            { name: "高新区" },
            { name: "web前端" },
            { name: "一年以内" },
          ],
          type: 0,
        },
        {
          name: "李四",
          time: "2020-06-22",
          pay: "6-8K",
          prov: 1,
          rqstd: [{ name: "高新区" }, { name: "web前端" }, { name: "三年" }],
          fail: "50%",
          type: 1,
        },
      ],
      areaValue: "区域",
      areaAct: 0,
      areaIf: false,
      area: [
        {
          values: ["全部", "直招", "外派"],
        },
	  ],
      tradeValue: "学历",
      tradeAct: 0,
      tradeIf: false,
      trade: [
        {
          values: ["高中", "大专", "本科", "硕士", "博士"],
        },
      ],
      scaleValue: "规模",
      scaleAct: 0,
      scaleIf: false,
      scaleList: [
        {
          values: [
            "不限",
            "100人以下",
            "100-200人",
            "200-500人",
            "500-1000人",
            "1000人以上",
          ],
        },
      ],
      scale: [
        {
          values: ["不限", "2-4K", "4-6K", "6-7K", "7-9K", "10K以上"],
        },
      ],
      ageValue: "年限",
      ageAct: 0,
      ageIf: false,
      ageLimit: [
        {
          values: ["不限", "1年以内", "1-3年", "3-5年", "5-10年", "10年以上"],
        },
      ],
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
    };
  },
  // methods 编写js函数
  methods: {
  //个人登陆初始化查询职位
	getFaxianData() {
		
	},
    getData(){
      this.$http({
        methods:"get",
        url:"api/company/findRecruit",
        params:{
          coId: this.coId,
          cityId: this.cityId,
        }
      }).then(({data}) => {
        this.lists = data.recruitList;
      })
    },
    go(r) {
      this.$router.push(r);
    },
    prop(i) {
      if (i == 0) {
        this.areaIf = !this.areaIf;
      } else if (i == 1) {
        this.tradeIf = !this.tradeIf;
      } else if (i == 2) {
        this.scaleIf = !this.scaleIf;
      } else if (i == 3) {
        this.ageIf = !this.ageIf;
      }
    },
    addr(){
      this.$router.push("/addr")
    },
    goDtl(id) {
      if(this.status==0){
        this.$router.push({name: "post", params: { recruitId: id }});
      }else if(this.status==1){
        console.log("发现页"+id);
        this.$router.push({name: "resume", params: { userId:id }});
      }
    },
    areaChange(picker, values) {
      areaValue = picker.values[0];
    },
    tradeChange(picker, values) {
      tradeValue = picker.values[0];
    },
    scaleChange(picker, values) {
      scaleValue = picker.values[0];
    },
    ageChange(picker, values) {
      ageValue = picker.values[0];
    },
    on(i) {
      if (i == 0) {
        this.areaValue = areaValue;
        this.areaIf = false;
      } else if (i == 1) {
        console.log(tradeValue);
        this.tradeValue = tradeValue;
        this.tradeIf = false;
      } else if (i == 2) {
        this.scaleValue = scaleValue;
        this.scaleIf = false;
      } else if (i == 3) {
        this.ageValue = ageValue;
        this.ageIf = false;
      }
    },
    off(i) {
      if (i == 0) {
        this.areaIf = false;
      } else if (i == 1) {
        this.tradeIf = false;
      } else if (i == 2) {
        this.scaleIf = false;
      } else if (i == 3) {
        this.ageIf = false;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 76px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head-btm {
  width: 10px;
}
.head-city {
  font-size: 12px;
  padding-right: 20px;
}
.head-city img {
  margin-left: 5px;
}
.head-title {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 26px;
}
.head-title img {
  width: 14px;
  margin-right: 5px;
}
.head-title input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 12px;
}
::-webkit-input-placeholder {
  font-weight: 100;
} /* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
} /* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
} /* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}
.head-search {
  padding: 0 10px 0 20px;
  font-size: 14px;
}
.con-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid rgb(248, 248, 248);
}
.con-top div {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #757575;
  font-size: 12px;
  border-right: 1px dashed #c7c7c7;
}
.con-top div:last-child {
  border: 0;
}
.more {
  font-size: 16px;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.content {
  width: 100%;
  background: rgb(248, 248, 248);
  padding-bottom: 70px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  top: 76px;
}
.block {
  width: 95%;
  box-sizing: border-box;
  padding: 10px 20px 10px 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  position: relative;
}
.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.block-top span:first-child {
  color: #333;
  font-weight: 700;
}
.block-top span:last-child {
  color: #3e63a8;
}
.block-calss {
  width: 100%;
}
.block-class span {
  color: #757575;
  font-size: 10px;
  padding: 2px 0px;
  border-radius: 3px;
  margin-right: 10px;
}
.block-class span img {
  width: 12px;
}
.block-company {
  font-size: 12px;
  color: #757575;
}
.block-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}
.imgBlock {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
}
.block-btm{
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #757575;
  font-size: 12px;
}
.block-btm span{
  color: #3e63a8;
  margin-left: 5px;
}
.mint-popup {
  display: flex;
  flex-flow: column;
}
.popup-top {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popup-top span {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-bottom: 1px solid #c7c7c7;
}
.popup-top span:first-child {
  border-left: 0 !important;
}
.popup-top span:last-child {
  border-right: 0 !important;
}
.popup-class {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-flow: column;
}
.popup-class .class-title {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}
.popup-class .class-div {
  /* height: 100%; */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.class-div-ch1 {
  /* height: 100%; */
  display: flex;
  flex-flow: row;
}
.class-div-ch {
  /* height: 100%; */
  display: flex;
  flex-flow: column;
}
.popup-class span {
  font-size: 12px;
  /* padding: 5px 20px; */
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  margin-right: 10px;
  border-radius: 2px;
  background: #eeeeee;
  box-sizing: border-box;
  border: 1px solid #eeeeee;
  color: #000;
  margin-bottom: 10px;
  /* border: 1px solid #757575; */
}
.active {
  color: #3e63a8 !important;
  border-color: #3e63a8 !important;
  background: #fff !important;
}
.blocks {
  width: 95%;
  box-sizing: border-box;
  padding: 10px 20px 10px 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  position: relative;
}
.blocks .blocks-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.blocks-top .block-name {
  color: #333;
  font-weight: 700;
}
.blocks-top .block-pay {
  color: #3e63a8;
  position: relative;
  z-index: 50;
}
.blocks-div {
  display: flex;
  align-items: center;
}
.block-img {
  width: 14px;
  margin-left: 10px;
}
.blocks-calss {
  width: 100%;
}
.blocks-class span {
  color: #757575;
  font-size: 10px;
  padding: 2px 0px;
  border-radius: 3px;
  margin-right: 10px;
}
.blocks-class span img {
  width: 12px;
}
.blocks-company {
  font-size: 12px;
  color: #757575;
}
.blocks-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}
.imgBlock {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
}
.blocks-btm {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #757575;
  font-size: 12px;
}
 
.blocks-btm span {
  color: #3e63a8;
  margin-left: 5px;
}
</style>
